<template>
  <div class="enhanced-table" :style="{ '--index-bg': `url(${indexBg})` }">
    <!-- 表格区域 -->
    <el-table
      :data="data"
      :row-class-name="tableRowClassName"
      style="width: 100%"
      @row-click="handleRowClick"
    >
      <!-- 序号列 -->
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          <div class="index-cell">
            <div class="index-bg"></div>
            <span class="index-number">{{ getIndex(scope.$index) }}</span>
          </div>
        </template>
      </el-table-column>

      <!-- 动态列 -->
      <el-table-column
        v-for="(column, idx) in columns"
        :key="idx"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
      >
        <template slot-scope="scope">
          <!-- 自定义图片列 -->
          <div v-if="column.type === 'image'">
            <img
              :src="scope.row[column.prop]"
              :alt="column.label"
              class="custom-row-image"
              :style="{
                width: column.imageWidth || '40px',
                height: column.imageHeight || '40px',
              }"
            />
          </div>

          <!-- 自定义渲染内容 -->
          <div v-else-if="column.render">
            <component
              :is="column.render"
              :row="scope.row"
              :index="scope.$index"
            />
          </div>

          <!-- 普通文本内容 -->
          <span v-else>
            {{ scope.row[column.prop] }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next, sizes, total"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "EnhancedTable",
  props: {
    // 表格数据
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
    // 列配置
    columns: {
      type: Array,
      required: true,
      default: () => [],
    },
    // 总数据量
    total: {
      type: Number,
      default: 0,
    },
    // 当前页码
    currentPage: {
      type: Number,
      default: 1,
    },
    // 每页显示数量
    pageSize: {
      type: Number,
      default: 10,
    },
    // 序号背景图片
    indexBg: {
      type: String,
      default: "",
    },
    // 单数行背景图片
    oddRowBg: {
      type: String,
      default: "",
    },
    // 双数行背景图片
    evenRowBg: {
      type: String,
      default: "",
    },
  },
  methods: {
    // 获取当前行的序号
    getIndex(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },

    // 设置行类名（用于背景图片）
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 0 ? "even-row" : "odd-row";
    },

    // 分页大小变化
    handleSizeChange(size) {
      this.$emit("page-size-change", size);
    },

    // 当前页变化
    handleCurrentChange(page) {
      this.$emit("page-change", page);
    },

    // 行点击事件
    handleRowClick(row, column, event) {
      this.$emit("row-click", row, column, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.enhanced-table {
  width: 100%;
  background: rgba(8, 20, 47, 0.5);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  ::v-deep .el-table td {
    color: #ccc;
  }
  .pagination-container {
    padding: 20px;
    display: flex;
    justify-content: center;
  }

  // 表头样式
  ::v-deep .el-table th {
    background-color: #005da5 !important;
    color: white;
    font-size: 1.1rem;
    text-align: center;
    font-weight: 500;
    border: none;
  }

  // 去除表格边框
  ::v-deep .el-table,
  ::v-deep .el-table__header-wrapper,
  ::v-deep .el-table__body-wrapper,
  ::v-deep .el-table th,
  ::v-deep .el-table td {
    border: none !important;
    background-color: transparent !important;
  }
  ::v-deep .el-table tr {
    background-color: #005da5;
  }
  ::v-deep .el-table .cell {
    line-height: 26px;
  }
  // 单元格样式
  ::v-deep .el-table td {
    padding: 12px 0;
    text-align: center;
  }

  // 单数行样式
  ::v-deep .el-table .odd-row {
    background: linear-gradient(
      90deg,
      rgba(13, 138, 188, 0.1) 0%,
      rgba(13, 138, 188, 0.05) 100%
    );
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: v-bind("oddRowBg");
      background-size: cover;
      background-position: center;
      opacity: 0.1;
      z-index: -1;
    }
  }

  // 双数行样式
  ::v-deep .el-table .even-row {
    background: linear-gradient(
      90deg,
      rgba(79, 172, 254, 0.1) 0%,
      rgba(79, 172, 254, 0.05) 100%
    );
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: "@/assets/images/双数.png";
      background-size: cover;
      background-position: center;
      opacity: 0.1;
      z-index: -1;
    }
  }

  // 悬停效果
  ::v-deep .el-table .odd-row:hover > td {
    background: linear-gradient(
      90deg,
      rgba(13, 138, 188, 0.3) 0%,
      rgba(13, 138, 188, 0.2) 100%
    ) !important;
  }

  ::v-deep .el-table .even-row:hover > td {
    background: linear-gradient(
      90deg,
      rgba(79, 172, 254, 0.3) 0%,
      rgba(79, 172, 254, 0.2) 100%
    ) !important;
  }

  // 序号列样式
  .index-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;

    .index-bg {
      width: 24px;
      height: 24px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      z-index: 0;
    }

    .index-number {
      font-weight: bold;
      color: #00f2fe;
      font-size: 12px;
      z-index: 1;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    }
  }

  // 自定义行图片样式
  .custom-row-image {
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(13, 138, 188, 0.5);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
  }

  .custom-row-image:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.5);
  }

  // 分页样式调整
  ::v-deep .el-pagination.is-background .btn-next,
  ::v-deep .el-pagination.is-background .btn-prev,
  ::v-deep .el-pagination.is-background .el-pager li {
    background-color: rgba(13, 138, 188, 0.2);
    color: #7fdbff;
    border: 1px solid #0d8abc;
  }

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #005da5;
    color: white;
  }

  ::v-deep .el-pagination__total {
    color: #7fdbff;
    font-weight: 500;
  }
}
</style>